<div class="wrapper">
  <app-breadcrumb [path]="path"></app-breadcrumb>
  <app-scrollview class="scrollview">
    <div *ngIf="!loading;then showPattern;else loadPattern"></div>
    <ng-template #showPattern>
      <div id="WorkerModelEdit">
        <form class="ui form">
          <div class="ui grid">
            <div class="ten wide column">
              <div class="two fields">
                <div class="field">
                  <label>{{'worker_model_name' | translate}}</label>
                  <input class="ui input" type="text" name="name" [(ngModel)]="pattern.name" [disabled]="loading">
                </div>
                <div class="field">
                  <label>{{'worker_model_type' | translate}}</label>
                  <ng-container *ngIf="workerModelTypes">
                    <sui-select class="selection" name="type" placeholder="{{'common_select' | translate}}"
                      [isDisabled]="loading" [options]="workerModelTypes" isSearchable="true" [(ngModel)]="pattern.type"
                      #selectType>
                      <sui-select-option *ngFor="let option of selectType.filteredOptions" [value]="option">
                      </sui-select-option>
                    </sui-select>
                  </ng-container>
                </div>
              </div>
              <div class="field" *ngIf="pattern.type && pattern.type === 'docker'">
                <label>{{'worker_model_shell_docker' | translate}}</label>
                <input class="ui input" type="text" name="shell" placeholder="sh -c" [(ngModel)]="pattern.model.shell">
              </div>
              <div class="field" *ngIf="pattern.type && pattern.type !== 'docker'">
                <label>{{'worker_model_pre_cmd' | translate}}</label>
                <textarea class="ui input" name="pre_cmd" [(ngModel)]="pattern.model.pre_cmd" [disabled]="loading || !currentUser.admin"></textarea>
              </div>
              <div class="field">
                <label suiPopup [popupText]="'worker_model_cmd_tooltip' | translate" popupPlacement="top left">
                  {{'worker_model_cmd' | translate}} <i _ngcontent-c5="" class="fa fa-question-circle"></i>
                </label>
                <input class="ui input" type="text" name="cmd" [(ngModel)]="pattern.model.cmd" [disabled]="loading || !currentUser.admin">
              </div>
              <div class="field" *ngIf="pattern.type && pattern.type === 'docker'">
                <label suiPopup [popupText]="'worker_model_env_tooltip' | translate" popupPlacement="top left">
                  {{'worker_model_env' | translate}} <i _ngcontent-c5="" class="fa fa-question-circle"></i>
                </label>
                <ng-container *ngIf="pattern.model.envs">
                  <div class="two fields" *ngFor="let envName of envNames; let index = index">
                    <div class="field">
                      <input type="text" name="name-{{envName}}" [placeholder]="'common_name' | translate" [value]="envName"
                        disabled>
                    </div>
                    <div class="field">
                      <input type="text" name="value-{{envName}}" [placeholder]="'common_value' | translate"
                        [(ngModel)]="pattern.model.envs[envName]">
                    </div>
                    <button class="ui icon red button" (click)="deleteEnv(envName, index)">
                      <i class="trash icon"></i>
                    </button>
                  </div>
                </ng-container>
                <div class="two fields">
                  <div class="field">
                    <input type="text" name="newEnvName" [placeholder]="'common_name' | translate" [(ngModel)]="newEnvName">
                  </div>
                  <div class="field">
                    <input type="text" name="newEnvValue" [placeholder]="'common_value' | translate" [(ngModel)]="newEnvValue">
                  </div>
                  <button class="ui icon green button" (click)="addEnv(newEnvName, newEnvValue)">
                    <i class="plus icon"></i>
                  </button>
                </div>
              </div>
              <div class="field" *ngIf="pattern.type && pattern.type !== 'docker'">
                <label>{{'worker_model_post_cmd' | translate}}</label>
                <textarea class="ui input" name="post_cmd" [(ngModel)]="pattern.model.post_cmd" [disabled]="loading || !currentUser.admin"></textarea>
              </div>
              <div class="field">
                <app-delete-button [loading]="editLoading" (event)="delete()"></app-delete-button>
                <button class="ui green right floated button" [class.loading]="editLoading" [class.disabled]="!pattern.type || !pattern.name || !pattern.model.cmd"
                  (click)="clickSaveButton()">
                  <i class="save icon"></i>{{ 'btn_save' | translate }}
                </button>
              </div>
            </div>
            <div class="six wide column">
              <div class="ui segment">
                <h2 class="ui header"><i class="fa fa-book"></i> {{ 'settings_tips' | translate }}</h2>
                <p>{{'worker_model_help_line_1' | translate}}</p>
                <p>{{'worker_model_help_line_2' | translate}}</p>
                <i class="fa fa-question-circle"></i> {{'worker_model_help_howtos' | translate}}
                <div class="ui list">
                  <a class="item" target="_blank" href="https://ovh.github.io/cds/docs/tutorials/worker_model-docker/">{{'worker_model_help_howto_link_1'
                    | translate}}</a>
                  <a class="item" target="_blank" href="https://ovh.github.io/cds/docs/tutorials/worker_model-docker/docker-customized/">{{'worker_model_help_howto_link_2'
                    | translate}}</a>
                  <a class="item" target="_blank" href="https://ovh.github.io/cds/docs/tutorials/worker_model-openstack/">{{'worker_model_help_howto_link_3'
                    | translate}}</a>
                  <a class="item" target="_blank" href="https://ovh.github.io/cds/docs/concepts/worker-model/">{{'common_read_more'
                    | translate}}</a>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </ng-template>
    <ng-template #loadPattern>
      <div class="ui text active loader">{{ 'common_loading' | translate }}</div>
    </ng-template>
  </app-scrollview>
</div>